import TextField from 'sentry/components/forms/fields/textField';
import Form from 'sentry/components/forms/form';
import {t} from 'sentry/locale';
import type {Organization} from 'sentry/types/organization';
import type {Project} from 'sentry/types/project';

type Payload = {
  clientId: string;
  clientSecret: string;
};

type Props = {
  organization: Organization;
  project: Project;
  formProps?: Partial<typeof Form>;
  onSuccess?: (data: Payload) => void;
};

export default function AddTempestCredentialsForm({
  organization,
  project,
  formProps,
  ...props
}: Props) {
  return (
    <Form
      submitLabel={t('Add Credentials')}
      apiEndpoint={`/projects/${organization.slug}/${project.slug}/tempest-credentials/`}
      apiMethod="POST"
      onSubmitSuccess={data => props.onSuccess?.(data)}
      requireChanges
      data-test-id="add-tempest-credentials-form"
      {...formProps}
    >
      <TextField
        name="clientId"
        label={t('Client ID')}
        required
        stacked
        flexibleControlStateSize
        inline={false}
      />
      <TextField
        name="clientSecret"
        label={t('Client Secret')}
        required
        stacked
        flexibleControlStateSize
        inline={false}
      />
    </Form>
  );
}
